<template>
  <template v-for="menu in masterMenu" :key="menu.path">
    <el-sub-menu :index="menu.path">
      <template #title>
        <el-icon>
          <Icon :icon="menu.meta!.icon" />
        </el-icon>
        <span class="sle">{{ menu.meta!.title }}</span>
      </template>
      <el-menu-item v-for="subItem in menu.children" :key="subItem.path" :index="subItem.path" @click="openDrawer(subItem)">
        <el-icon>
          <Icon :icon="subItem.meta!.icon" />
        </el-icon>
        <template #title>
          <span class="sle">{{ subItem.meta!.title }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </template>
</template>

<script setup lang="ts">
import type { RouteRecordRaw } from "vue-router";
import { ref } from "vue";

defineOptions({
  name: "PanoramaMenu"
});
const props = defineProps<{ menuList: RouteRecordRaw[]; openDrawer: (item: RouteRecordRaw) => void }>();
const masterMenu = ref<RouteRecordRaw[]>();

/**
 * 初始化菜单
 */
const initMenu = () => {
  masterMenu.value = props.menuList.filter((item) => !item.meta!.isHidden && item.path !== "/dashboard");
};

initMenu();
</script>

<style scoped lang="scss">
.panorama-menu-layout {
  width: 100%;
  height: 100%;
  .drawer-box {
    position: absolute;
  }
}
</style>
